<template>
  <div class="mod-user">
    <avue-crud
      ref="crudRef"
      :page="page"
      :data="dataList"
      :option="tableOption"
      @search-change="onSearch"
      @selection-change="selectionChange"
      @on-load="getDataList"
    >
      <template #menu-left>
        <el-button
          v-if="isAuth('admin:complaintSuggestions:save')"
          type="primary"
          icon="el-icon-plus"
          @click="onAddOrUpdate()"
        >
          新增
        </el-button>
      </template>



      <!--<template #pic="scope">
        <span v-if="scope.row.pic" class="avue-crud__img">
          <el-icon><Document /></el-icon>
        </span>
        <span v-else>-</span>
      </template>-->

      <template #type="scope">
        <el-tag v-if="scope.row.type == 0"> 投诉 </el-tag>
        <el-tag v-else-if="scope.row.type == 1"> 建议 </el-tag>
      </template>

      <template #state="scope">
        <el-tag v-if="scope.row.state == 0"> 已提交 </el-tag>
        <el-tag v-else-if="scope.row.state == 1"> 已回复 </el-tag>
        <el-tag v-else-if="scope.row.state == 2"> 已评分 </el-tag>
      </template>

      <template #imgs="scope">
        <el-image v-for="item in (scope.row.imgs || '').split(',')" style="width: 50px; height: 50px" :src="resourcesUrl+item" fit="cover" :preview-src-list="(scope.row.imgs || '').split(',').map(function (num) {return resourcesUrl + num;})"  />
      </template>
      

      <template #score="scope">
        <el-rate
          v-model="scope.row.score"
          disabled
          text-color="#ff9900"
        />
      </template>

      <template #menu="scope">
        <el-button
          v-if="isAuth('admin:complaintSuggestions:update')"
          type="primary"
          icon="el-icon-edit"
          @click.stop="onAddOrUpdate(scope.row.id)"
        >
          编辑
        </el-button>

        <el-button
          v-if="isAuth('admin:complaintSuggestions:delete')"
          type="danger"
          icon="el-icon-delete"
          @click.stop="onDelete(scope.row.id)"
        >
          删除
        </el-button>

        <el-button
          v-if="isAuth('admin:complaintSuggestions:update')"
          type="primary"
          icon="el-icon-edit"
          @click.stop="openReply(scope.row)"
        >
          回复
        </el-button>
        <el-button
          v-if="isAuth('admin:complaintSuggestions:update')"
          type="primary"
          icon="el-icon-edit"
          @click.stop="openScore(scope.row)"
        >
          评分
        </el-button>
      </template>
    </avue-crud>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="getDataList"
    />

    <!--回复-->
    <reply
      v-if="replyVisible"
      ref="replyRef"
      @refresh-data-list="getDataList"
    />

    <!--评分-->
    <score
      v-if="scoreVisible"
      ref="scoreRef"
      @refresh-data-list="getDataList"
    />
  </div>
</template>

<script setup>
import { isAuth } from "@/utils";
import { tableOption } from "@/crud/admin/complaintSuggestions.js";
import AddOrUpdate from "./add-or-update.vue";
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
import reply from "./components/reply.vue";
import score from "./components/score.vue";

const dataList = ref([]);
const dataListLoading = ref(false);
const dataListSelections = ref([]);
const addOrUpdateVisible = ref(false);
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示多少条
});
/**
 * 获取数据列表
 */
const getDataList = (pageParam, params, done) => {
  dataListLoading.value = true;
  http({
    url: http.adornUrl("/admin/complaintSuggestions/page"),
    method: "get",
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.pageSize : pageParam.pageSize,
        },
        params
      )
    ),
  }).then(({ data }) => {
    dataList.value = data.records;
    page.total = data.total;
    dataListLoading.value = false;
    if (done) done();
  });
};

const addOrUpdateRef = ref(null);
/**
 * 新增 / 修改
 * @param id
 */
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true;
  nextTick(() => {
    addOrUpdateRef.value?.init(id);
  });
};

/**
 * 条件查询
 */
const onSearch = (params, done) => {
  getDataList(page, params, done);
};

/**
 * 多选变化
 */
const selectionChange = (val) => {
  dataListSelections.value = val;
};

const onDelete = (id) => {
  ElMessageBox.confirm("确定进行删除操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http({
        url: http.adornUrl("/admin/complaintSuggestions/" + id),
        method: "delete",
        data: http.adornData({}),
      }).then(() => {
        ElMessage({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            getDataList();
          },
        });
      });
    })
    .catch(() => {});
};

const replyVisible = ref(false);
const replyRef = ref(null);
const openReply = (row) => {
  replyVisible.value = true;
  nextTick(() => {
    replyRef.value?.init(row);
  });
};


const scoreVisible = ref(false);
const scoreRef = ref(null);
const openScore = (row) => {
  scoreVisible.value = true;
  nextTick(() => {
    scoreRef.value?.init(row);
  });
};


</script>
<style scoped>
/*https://blog.csdn.net/qq_31683775/article/details/141282827?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22141282827%22%2C%22source%22%3A%22qq_31683775%22%7D*/
::v-deep(.el-table__cell) {
  position: static !important; 
}
</style>